<html>
<head>
	<meta charset="UTF-8"> 
	<style type="text/css">
		#myCanvas{
			border: 1px solid #ccc;
		}
	</style>

	<script type="text/javascript">
		function init(){

			// 2.获取画布对象，设置canva大小
			var canvas = document.getElementById("myCanvas");
			canvas.width  = window.innerWidth;
			canvas.height = window.innerHeight;

			// 3.获取绘图设
			var ctx = canvas.getContext("2d");

			// 4.设置线的Path
			ctx.beginPath();
			// 起点
			ctx.moveTo(100,100);
			// 第二个点
			ctx.lineTo(300,150);
			// 第三个点
			ctx.lineTo(300,60);

			// 5.绘制线
			ctx.strokeStyle = "red";
			ctx.stroke();			
		}

		function drawPoints(ctx, width, height){
						
			var cx,cy;
			for(var i=0; i<100000; i++){
				cx = Math.random() * width;
				cy = Math.random() * height;

				ctx.beginPath();
				ctx.arc(cx,cy,2,0,Math.PI*2,true);
				ctx.fill();
				ctx.stroke();
			}			
		}
	</script>

    <title>Canvas 绘图</title>
</head>

<body onload=init();>
	<!-- 1.定义Canvas元素-->
	<canvas id="myCanvas" width="400" height="400"></canvas>

</body>
</html>


